<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>管理系统</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../lib/AdminLTE/lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/AdminLTE/lib/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../lib/AdminLTE/lib/adminlte/css/AdminLTE.min.css">
    <link rel="stylesheet" href="../lib/AdminLTE/lib/adminlte/css/skins/skin-black.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/weui-master/dist/style/weui.min.css">
    <style>
    .bigtitle {
        margin-left: 8px;
    }
    
    .weui_input {
        background-color: white;
        border-radius: 4px;
        border: 1px solid #d1d1d1;
        height: 25px;
        line-height: 25px;
    }
    
    .search {
        height: 50px;
        line-height: 50px;
        margin-top: 15px;
    }
    
    .search select,
    .search input,
    .search .btn {
        height: 28px;
        width: 180px;
        margin-left: 20px;
    }
    
    .search input {
        margin-left: 8px;
    }
    
    .search .btn {
        width: 60px;
        line-height: 28px;
        padding: 0 3px;
    }
    </style>
</head>

<body class="hold-transition skin-black sidebar-mini">
    <div class="wrapper">
        <main-head></main-head>
        <main-sidebar></main-sidebar>
        <div class="content-wrapper">
            <section class="content-header">
                <b class="bigtitle"> 商贸服务列表</b>
                <div class="search">
                    <input type="text" placeholder="输入标题可查找">
                    <!--  <select name="" id="" v-model="articletype" v-model="articletype">
                        <option value="">请选择分类</option>
                        <option value="1">摊位出租</option>
                        <option value="2">外贸服务</option>
                        <option value="3">物流服务</option>
                        <option value="4">金融服务</option>
                    </select> -->
                    <button class="btn btn-primary" @click="getAtricles()">查找</button>
                </div>
            </section>
            <section class="content">
                <div class="tablebox">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th style="width: 40%;">标题</th>
                                <th style="width: 30%;">提交时间</th>
                                <th style="width: 15%;">查看</th>
                                <th style="width: 15%;">删除</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(article,index) in articles">
                                <td>{{article.title}}</td>
                                <td>{{article.createTime}}</td>
                                <td>
                                    <button class="btn btn-default" style="padding: 2px 3px;" @click="showArticle(article.id)">查看</button>
                                </td>
                                <td>
                                    <button class="btn btn-danger" style="padding: 2px 3px;" @click="delArticle(article.id,index)">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
    </div>
    <script src="../ueditor/ueditor.config.js"></script>
    <script src="../ueditor/ueditor.all.min.js"></script>
    <script src="../lib/AdminLTE/lib/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../lib/AdminLTE/lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="../lib/AdminLTE/lib/slimScroll/jquery.slimscroll.min.js"></script>
    <script src="../lib/AdminLTE/lib/adminlte/js/app.min.js"></script>
    <script src="../lib/vue/vue.js"></script>
    <script src="js/mainHeader.js"></script>
    <script src="js/mainSidebar.js"></script>
    <script>
    $(function() {
        var winHeight = $(window).height();
        // $(".wrapper").height(winHeight);
        $(".content-wrapper").css("minHeight", winHeight - 52);

        var wrapper = new Vue({
            el: '.wrapper',
            data: {
                title:'',
                articletype: '',
                articles: []



            },
            components: {
                mainHead,
                mainSidebar
            },
            methods: {
                getAtricles: function() {
                    this.articles.splice(0, this.articles.length);
                    $.ajax({
                        type: "GET",
                        url: "../article/queryNews?title=" + this.title + '&type=' + this.articletype,
                        dataType: "json",
                        success: function(ret) {
                            console.log(ret);
                            if (ret.code == 0) {
                                if (ret.data.length > 0) {
                                    ret.data.reverse();
                                    $.each(ret.data, function(index, val) {
                                        var time = new Date(parseInt(val.createTime)).toLocaleString().replace(/:\d{1,2}$/, ' ');
                                        console.log(time);
                                        val.createTime = time;
                                        if (val.title != null) {
                                            wrapper.articles.push(val);
                                        }



                                    });

                                } else {

                                }
                            } else {
                                alert(ret.message);

                            }
                        }
                    });

                },
                showArticle: function(articleId) {
                    window.location.href = "editnews.html?articleId=" + articleId;

                },
                delArticle:function(id,index){
                        $.ajax({
                            type: 'GET',
                            url: '../article/deleteNews?id='+id,
                            dataType: 'json',
                            // async:false,
                            success: function (ret) {
                                console.log(ret);

                                if (ret.code == 0) {
                                  
                                        wrapper.articles.splice(index,1);

                                } else {
                                    errorPrecess(ret);

                                }
                            },
                            error: function (XMLHttpRequest, textStatus, errorthrow) {
                                // alert("XMLHttpRequest.status="+XMLHttpRequest.status);
                            }
                        });
                        
                    }

            }
        })
        wrapper.getAtricles();


    })
    </script>
</body>

</html>
